<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*选中的li悬浮变色*/
			        .boxdel:after {
			            content: "";
			            background:rgba(0,0,0,0.4);
			            z-index:1;
			            -webkit-transition: 0.2s;
			            -moz-transition: 0.2s;
			            -ms-transition: 0.2s;
			            -o-transition: 0.2s;
			            transition: 0.2s;
			            position: absolute;
			            top:1px;
			            right:9.2px;
			            width: 92px;
			            height: 92px;
			            opacity: 0;
			            filter: alpha(opacity=0);
			        }
			        .boxdel:hover:after {
			            opacity: 100;
			            filter: alpha(opacity=0);
			            cursor: pointer;
			        }
			        .boxdel:before {
			            content: "";
			            display: inline-block;
			            background-image: url(images/delete.png);
			            background-size:cover;
			            float: right;
			            position: absolute;
			            z-index: 5;
			            top:31px;
			            right: 45px;
			            width: 1.5rem;
			            height: 1.5rem;
			            opacity: 0;
			            filter: alpha(opacity=0);
			        }
			        .boxdel:hover:before {
			            opacity: 100;
			            filter: alpha(opacity=0);
			            cursor: pointer;
			        }
			        /*end*/
			        #img-box li {
			            display: inline-block;
			            position: relative;
			        }

		</style>
	</head>
	<body>
		<video style="height:auto;" src="" id="video0" controls="controls"></video>
		<input class="form-control" type="file" style="height:auto;"
		id="video" name="video"/>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			// hTML5实现表单内的上传文件框，上传前预览视频，刷新预览video，使用HTML5 的File API,
			// 建立一个可存取到该file的url，一个空的video标签，ID为video0,把选择的文件显示在video标签中，实现视频预览功能。
			// 需要选择支持HTML API的浏览器。
			         $("#video").change(function(){
			             var objUrl = getObjectURL(this.files[0]) ;
			             console.log("objUrl = "+objUrl) ;
			             if (objUrl) {
			                 $("#video0").attr("src", objUrl) ;
			             }
			         }) ;
			         //建立一个可存取到该file的url
			         function getObjectURL(file) {
			             var url = null ;
			             if (window.createObjectURL!=undefined) { // basic
			                 url = window.createObjectURL(file) ;
			             } else if (window.URL!=undefined) { // mozilla(firefox)
			                 url = window.URL.createObjectURL(file) ;
			             } else if (window.webkitURL!=undefined) { // webkit or chrome
			                 url = window.webkitURL.createObjectURL(file) ;
			             }
			             return url ;
			         }
		</script>
	</body>
</html>
